<template>
	<view v-if="!isMore" class="theme-item">
		<image class="pic" src="/common/images/preview_small.webp" mode="aspectFill"></image>
		<view class="mask flex-center">明星美女</view>
		<view class="tag flex-center">3天前更新</view>
	</view>
	<!-- 更多 -->
	<view v-else class="theme-item more">
		<image class="pic" src="/common/images/preview_small.webp" mode="aspectFill"></image>
		<view class="mask flex-center">
			<uni-icons type="more-filled" size="30" color="#fff"></uni-icons>
			<text>更多</text>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		isMore: {
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss" scoped>
.theme-item {
	position: relative;
	border-radius: 10rpx;
	overflow: hidden;
	.pic {
		width: 100%;
		height: 340rpx;
	}
	.mask {
		position: absolute;
		height: 80rpx;
		background: rgba(0, 0, 0, 0.2);
		color: #fff;
		left: 0;
		bottom: 0;
		width: 100%;
		backdrop-filter: blur(20rpx);
		font-weight: 600;
		font-size: 30rpx;
	}
	.tag {
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(255, 129, 90, 0.7);
		backdrop-filter: blur(20rpx);
		color: #fff;
		font-size: 22rpx;
		padding: 6rpx 14rpx;
		border-radius: 0 0 20rpx 0;
	}
	&.more {
		.mask {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			flex-direction: column;
		}
	}
}
</style>